<template>
  <header class="todo-header">
    <h1>Todo List</h1>
    <div class="input-section">
      <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        @keyup.enter="$emit('add-todo')"
        placeholder="添加新的待办事项..."
        class="todo-input"
      />
      <button @click="$emit('add-todo')" class="add-btn">添加</button>
    </div>
  </header>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

defineEmits(['update:modelValue', 'add-todo'])
</script>

<style scoped>
.todo-header {
  margin-bottom: 2rem;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.input-section {
  display: flex;
  gap: 1rem;
}

.todo-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.add-btn {
  padding: 0.75rem 1.5rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.add-btn:hover {
  background-color: #45a049;
}
</style>